import React from 'react';
import { InbizIcon } from '@inbiz/utils';

const arrowMap = {
  next: 'icon-right',
  prev: 'icon-right',
  rollnext: 'icon-ic-xianshi',
  rollprev: 'icon-ic-xianshi',
};

const Arrow = ({
  type,
  className: arrowClassName,
  currentSlide,
  slideCount,
  viewType,
  length = 0,
  direction,
  ...restArrowProps
}: any) => {
  return length > 1 ? (
    <span {...restArrowProps} className={`${arrowClassName}`}>
      <div className="arrow-icon-wrapper">
        <InbizIcon
          type={arrowMap[type]}
          style={{
            color: '#666',
            transform: direction ? 'rotate(180deg)' : 'rotate(0)',
            fontSize: viewType == 'roll' ? '32px' : '48px',
          }}
        />
      </div>
    </span>
  ) : null;
};

export default Arrow;
